<template>
 <div class="OrderManage">
     <div class="celedartime">
  <van-field
  readonly
  
  clickable 
  name="calendar"
  :value="search.start_time"
  label="开始日期"
  placeholder="开始日期"
  @click="start_time = true"
/>
<van-calendar :min-date="minDate" :max-date="maxDate" v-model="start_time" @confirm="onConfirmstart" />

<van-field
  readonly
  clickable
  name="calendar"
  :value="search.end_time"
  label="结束日期"
  placeholder="结束日期"
  @click="end_time = true"
/>
<van-calendar :min-date="minDate" :max-date="maxDate"  v-model="end_time" @confirm="onConfirmend" />

 </div>
 <div class="money">
     <van-cell-group>
  <van-field v-model="search.fmoney"  placeholder="最小金额" />
</van-cell-group>
<van-cell-group>
  <van-field v-model="search.emoney"  placeholder="最大金额" />
</van-cell-group>
 <van-button type="primary" size="small" @click="searchOrder">搜索</van-button>
 </div>
 <!-- 查看详情 -->
<van-action-sheet v-model="show" title="详情">
  <div class="content">
<table border="" style="font-size:14px" cellpadding="0" cellspacing="0">
      <tr>
        <td>用餐人数</td>
        <td>成人数</td>
        <td>儿童数</td>
        <td>金额</td>
        <td>结算方式</td>
        <td>是否自取</td>
        <td>地址</td>
        <td>备注</td>
      </tr>
      <tr>
        <td>{{selectDataMsg.person_count}}</td>
        <td>{{selectDataMsg.adult}}</td>
        <td>{{selectDataMsg.child}}</td>
        <td>{{selectDataMsg.allcost}}</td>
        <td>{{selectDataMsg.paytype}}</td>
        <td>{{selectDataMsg.is_pick ==1?'YES':"NO"}}</td>
        <td>{{selectDataMsg.full_address}}</td>
        <td>{{selectDataMsg.content}}</td>
      </tr>
    </table>

<table border="" style="font-size:14px" cellpadding="0" cellspacing="0">
      <tr>
        <td>菜名</td>
        <td>单价</td>
        <td>数量</td>
        <td>合计</td>
      
      </tr>
      <tr v-for="(item,index) in selectDataMsg.orderdet" :key="index">
        <td>{{item.goodsname}}</td>
        <td>{{item.goodscost}}</td>
        <td>{{item.goodscount}}</td>
        <td>{{item.goodsallcost}}</td>
      </tr>
 
    </table>
  </div>
</van-action-sheet>

<!-- 修改 -->

<van-dialog v-model="upDataMsg" show-cancel-button title="修改订单"
:beforeClose="onBeforeClose">
  <div class="content">
<van-form>


<van-field
  readonly
  clickable
  name="calendar"
  :value="upDataMsglist.addtime"
  label="下单时间"
  placeholder="选择下单时间"
  @click="showCalendar = true"
/>
<van-calendar :min-date="minDate" :max-date="maxDate" v-model="showCalendar" @confirm="addtimeOnConfirm" />


  <van-field
    v-model="upDataMsglist.person_count"
    name="用餐人数"
    label="用餐人数"
    placeholder="请输入用餐人数"
  />
  
  <van-field
  v-model="upDataMsglist.content"
  rows="4"
  autosize
  label="备注"
  type="textarea"
  maxlength="100"
  placeholder="请输入备注"
  show-word-limit
/>
  
</van-form>
 
 
</div>
</van-dialog>

<div class="tableData">
<el-table
    :data="orderList"
    height='61vh'
    style="width: 100%;"
    >

    <el-table-column
      prop="dno"
      label="订单号"
      height="160px"
      width="">
    </el-table-column>

    <el-table-column
      fixed
      prop="table_num"
      label="桌号"
      width="">
    </el-table-column>

    <el-table-column
      prop="addtime"
      label="下单时间"
      width="">
      <template slot-scope="props">
                  {{
                    props.row.addtime*1e3 | formatDate
                  }}
                </template>
    </el-table-column>


    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="selectData( scope.row)"
          type=""
          size="mini">
          详情
        </el-button>

          <el-button v-if="false"
          @click.native.prevent="upData(scope.row)"
          type=""
          size="mini">
          修改
        </el-button>
          <el-button
          @click.native.prevent="deleteData(scope.row)"
          type=""
          size="mini">
          撤回
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<div class="pages">
  <van-pagination
  v-model="search.page"
  :total-items="total"
  :show-page-size="4"
  force-ellipses
  items-per-page='10'
  @change ='changePage'
/>
</div>

 </div>
</template>

<script>
  import {  getUserRequest} from "@/api/api";
  import { Dialog } from 'vant';
export default {
    name:'OrderManage',
    components: {
    [Dialog.Component.name]: Dialog.Component,
  },
    data(){
        return{
        show:false,
        upDataMsg:false,
            showCalendar: false,
        minDate: new Date(2010, 11, 31),
        maxDate: new Date(2030, 11, 31),
        value:'',
        start: '',
        start_time: false,
        end_time:false,
        total:null,
        // 搜索
        search:{
            ctrl:'shopcenter',
            action: 'order_list',
            shopid:sessionStorage.getItem('shopId'),
            page: 1,
            pagesize: 10,
            is_delete: 0,
            start_time:'',
            end_time:'',
            fmoney:'',
            emoney:''
        },
        // 修改
        upDataMsglist:{
            ctrl: 'shopcenter',
            action: 'ChangeOrder',
            orderid: '',
            uid: '',
            addtime: '',
            person_count: '',
            content: '',
        },
        // 删除
        deleteOrder:{
          ctrl: 'shopcenter',
          action:'do_delete',
          type:'0',
          orderId:'',
          shopid:sessionStorage.getItem('shopId'),
            },
          orderList:[],
          selectDataMsg:{}
        }
    },
    methods:{
        getOrderList(){
            getUserRequest(this.search).then(res=>{
                var data = res.data
            if(data.state==1){
                this.orderList = data.data.order_list
                this.total = data.data.records
            }else{
                this.$toast(res.data.msg);
            }
        }).catch(() => {
         this.$toast('服务器异常');
      })
        },
        
   onConfirmstart(date) {
      this.search.start_time = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.start_time = false;
    },
    onConfirmend(date){
      this.search.end_time = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.end_time = false;
    },

    addtimeOnConfirm(date){
      this.upDataMsglist.addtime = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
    // 搜索
    searchOrder(){
      this.search.page = 1
      let searchData = JSON.parse(JSON.stringify( this.search))
   
      if(searchData.start_time !='') searchData.start_time = (new Date(searchData.start_time)).getTime() /1000;
      if(searchData.end_time!='') searchData.end_time = (new Date(searchData.end_time)).getTime() /1000;

     getUserRequest(searchData).then(res=>{
       var data = res.data
            if(data.state==1){
                this.orderList = data.data.order_list
                this.total = data.data.records
            }else{
              this.orderList =[]
              this.total = 0

                this.$toast(res.data.msg);
            }
  }).catch(() => {
         this.$toast('服务器异常');
      })
    },
    // 删除
    deleteData(date){
      this.deleteOrder.orderId = date.id

Dialog.confirm({
  title: '标题',
  message: `此操作将撤回订单:${date.dno}`,
})
  .then(() => {
  getUserRequest(this.deleteOrder).then(res=>{
      if (res.data.state === 200) {
            this.$toast(res.data.msg);
            this.searchOrder()
        }else{
            this.$toast(res.data.msg);
          }
        }).catch(() => {
           this.$toast('服务器异常');
      })
  })
  .catch(() => {

    // on cancel
  });
  return
    
    },
    // 分页
    changePage(page){
      this.search.page = page
        this.getOrderList()
      
    },


    // 查看详情
    selectData(data){
      this.show=true
      this.selectDataMsg = data
    },
    // 修改
    upData(data){
       this.upDataMsglist.orderid =data.id
       this.upDataMsglist.uid =data.buyeruid
       this.upDataMsglist.orderid =data.id
       this.upDataMsg=true
    },
    onBeforeClose(action, done){
      if (action === "confirm") {
        if(this.upDataMsglist.addtime!=''){
        var datamag = JSON.parse(JSON.stringify(this.upDataMsglist))
        datamag.addtime = (new Date(datamag.addtime)).getTime() /1000;
        console.log(datamag)
          getUserRequest(datamag).then(res=>{
            console.log(res)
              if (res.status === 200) {
               console.log("chenggon")
               
                this.getOrderList()
              }else{

                }
           })
             done()

         }else{
          this.$toast('下单时间不能为空');
              done(false)
        }
      }else{
        done()
          }
    },

    },
    mounted(){
        this.getOrderList()
    },
   
  


}
</script>

<style scoped>

.celedartime,.money{
    display: flex;
    align-items: center;
   
   
}
 .money .van-cell__title{
        width: 26%;
    }
 .money .van-cell-group{
        width: 40%;
    }
   .el-button--mini{
     border: 0;
       padding: 0.03px;
   }
   .tableDataDetail{
       background: #fff;
       position:fixed;
       z-index: 999;
   }
    .content {
      margin: 0 auto;
    text-align: center;
    padding: 16px 16px 160px;
  }


.OrderManage{
  position: relative;
}

.pages{width: 100%;
  position: fixed;
  
  bottom: 0;
}
</style>